<div class="p-4 pb-12">

  <div class="cbx-preferences-container">
    <div class="setting-item">
      <div class="setting-info">
        <div class="setting-label-row">
          <label class="setting-label">Page Spread</label>
          <div class="radio-group">
            @for (spread of cbxSpreads; track spread) {
              <div class="radio-option">
                <p-radiobutton
                  [inputId]="spread.key"
                  name="spread"
                  [value]="spread.key"
                  [(ngModel)]="selectedCbxSpread">
                </p-radiobutton>
                <label [for]="spread.key">{{ spread.name }}</label>
              </div>
            }
          </div>
        </div>
        <p class="setting-description">
          Configure how comic book pages are displayed - single page or double page spread.
        </p>
      </div>
    </div>

    <div class="setting-item">
      <div class="setting-info">
        <div class="setting-label-row">
          <label class="setting-label">Page Layout</label>
          <div class="radio-group">
            @for (mode of cbxViewModes; track mode) {
              <div class="radio-option">
                <p-radiobutton
                  [inputId]="mode.key"
                  name="zoom"
                  [value]="mode.key"
                  [(ngModel)]="selectedCbxViewMode">
                </p-radiobutton>
                <label [for]="mode.key">{{ mode.name }}</label>
              </div>
            }
          </div>
        </div>
        <p class="setting-description">
          Choose how comic pages are displayed while reading.
        </p>
      </div>
    </div>
  </div>
</div>
